<template>
	<main-content
		:tableHeight.sync="tableHeight"
		:otherDependenComponents="otherDependenComponents"
	>
		<template slot="query">
			<el-form
				ref="form"
				:inline="true"
				:model="queryData"
				label-width="auto"
			>
				<el-form-item :label="`${$t('merchant.merchant_name')}:`">
					<merchant-select
						v-model="queryData.merchantId"
					></merchant-select>
				</el-form-item>
				<el-form-item>
					<el-button
						:disabled="loading"
						icon="el-icon-search"
						size="medium"
						type="primary"
						@click="search"
					>
						{{ $t('common.search') }}
					</el-button>
					<el-button
						:disabled="loading"
						icon="el-icon-refresh-left"
						size="medium"
						@click="reset"
					>
						{{ $t('common.reset') }}
					</el-button>
					<el-button
						v-if="hasPermission('803031')"
						:disabled="loading"
						icon="el-icon-plus"
						size="medium"
						type="success"
						@click="editAndAdd"
					>
						{{ $t('common.add') }}
					</el-button>
				</el-form-item>
			</el-form>
		</template>
		<template slot="content">
			<el-table
				v-loading="loading"
				:data="tableData"
				:header-cell-style="getRowClass"
				border
				class="small-size-table"
				element-loading-spinner="el-icon-loading"
				style="width: 100%"
				:max-height="tableHeight"
			>
				<el-table-column
					:label="$t('merchant.merchant_name')"
					align="center"
					prop="merchantName"
					width="180px"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.merchantName || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					:label="$t('merchant.insert_venue')"
					align="center"
					prop="merchantName"
					width="360"
				>
					<template slot-scope="scope">
						<div class="tag-content">
							<el-tag
								v-for="item in scope.row.list"
								:key="item.id"
								style="margin:4px"
								type="success"
							>
								{{
									bwVenueList.find(
										(subItem) =>
											subItem.venueCode === item.venueCode
									)
										? bwVenueList.find(
												(subItem) =>
													subItem.venueCode ===
													item.venueCode
										  )[getKey('venueName')]
										: item.venueName
								}}
							</el-tag>
						</div>
					</template>
				</el-table-column>
				<el-table-column
					:label="$t('merchant.creator')"
					align="center"
					prop="createdBy"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.createdBy || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					:label="$t('merchant.create_time')"
					align="center"
					prop="createdAt"
					width="180"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.createdAt || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					:label="$t('merchant.last_operate')"
					align="center"
					prop="updatedBy"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.updatedBy || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					:label="$t('merchant.last_operate_time')"
					align="center"
					prop="updatedAt"
					width="160"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.updatedAt || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					:label="$t('common.actions')"
					align="center"
					prop="operating"
					width="210"
				>
					<template slot-scope="scope">
						<el-button
							v-if="hasPermission('803033')"
							size="medium"
							type="text"
							@click="feeRateDialog(scope.row)"
						>
							{{ $t('merchant.agent_venue_pre') }}
						</el-button>
						<el-button
							v-if="hasPermission('803032')"
							size="medium"
							type="text"
							@click="editAndAdd(scope.row, scope.$index)"
						>
							{{ $t('common.edit') }}
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页 -->
			<el-pagination
				v-show="total"
				class="pageValue"
				:current-page.sync="pageNum"
				background
				layout="total, sizes,prev, pager, next, jumper"
				:page-size="pageSize"
				:page-sizes="$store.getters.pageSizes"
				:total="total"
				:pager-count="9"
				@current-change="handleCurrentChange"
				@size-change="handleSizeChange"
			></el-pagination>
		</template>
		<edit-and-add
			ref="editAndAddRef"
			:venueList="bwVenueList"
			:tableData="tableData"
			:merchartList="merchartList"
			:title="title"
			@loadData="loadData"
		></edit-and-add>
		<!--代理场馆费率查看-->
		<el-dialog
			:title="$t('merchant.agent_venue_pre_look')"
			:visible.sync="feeRateVisible"
			align="center"
			width="30%"
		>
			<div class="flex-right">
				商户名称 德信
			</div>
			<el-table :data="feeRateData" border>
				<el-table-column
					align="center"
					prop="venueName"
					:label="$t('merchant.insert_venue')"
				></el-table-column>
				<el-table-column
					align="center"
					:label="`${$t('merchant.agent_venue_pre')}%`"
					prop="venueFeeRate"
				>
					<template slot-scope="scope">
						<span v-if="scope.row.venueCode === 'DZ'">
							俱乐部：{{
								formatThreeDecimalFull(
									scope.row.venueFeeRate
								) || '-'
							}}
							<br />
							保险：{{
								scope.row.venueCode === 'DZ'
									? formatThreeDecimalFull(
											scope.row.insureFeeRate
									  ) || '-'
									: ''
							}}
						</span>
						<span v-else>
							{{
								formatThreeDecimalFull(
									scope.row.venueFeeRate
								) || '-'
							}}
						</span>
					</template>
				</el-table-column>
			</el-table>
		</el-dialog>
	</main-content>
</template>

<script>
import list from '@/mixins/list'
import { routerNames } from '@/utils/consts'
import { queryMerchantVenueListApi } from '@/api/merchant/merchant-config/venue-config'
import EditAndAdd from './components/editAndAdd'
import { formatTwoDecimalFull } from '@/utils'
import { queryMerchantListApi } from '@/api/merchant/merchant-manage/merchant-list'
import { getVenueListWithoutPage } from '@/api/game'
import MainContent from '@/components/MainContent/index.vue'

export default {
	name: routerNames.venueConfig,
	components: { EditAndAdd, MainContent },
	mixins: [list],
	data() {
		this.search = this.throttle(this.search, 1000)
		this.reset = this.throttle(this.reset, 1000)
		return {
			tableHeight: 480,
			otherDependenComponents: [],
			bwVenueList: [],
			queryData: {},
			merchartList: [],
			tableData: [],
			feeRateData: [],
			title: '',
			feeRateVisible: false
		}
	},
	created() {
		this.getGameVenueList()
	},
	methods: {
		formatTwoDecimalFull,
		// 获取游戏场馆列表
		formatThreeDecimalFull(num) {
			if (num === '') {
				return ''
			}
			const result = Number(
				(num || 0).toString().match(/^\d+(?:\.\d{0,3})?/)
			)
			let s_x = result.toString()
			let pos_decimal = s_x.indexOf('.')
			if (pos_decimal < 0) {
				pos_decimal = s_x.length
				s_x += '.'
			}
			while (s_x.length <= pos_decimal + 3) {
				s_x += '0'
			}
			return s_x
		},
		async getGameVenueList() {
			try {
				this.loading = true
				const { data } = await getVenueListWithoutPage()
				this.bwVenueList = data
				this.loading = false
			} catch (e) {
				this.loading = false
			}
		},
		// 获取商户列表
		async getMerchantList() {
			try {
				this.loading = true
				const { data } = await queryMerchantListApi({})
				this.merchartList = data
			} catch (e) {
				this.loading = false
			}
		},
		// 获取数据
		async loadData() {
			try {
				this.loading = true
				const res = await queryMerchantVenueListApi({
					...this.pageParams,
					...this.queryData
				})
				if (res?.code === 200) {
					const { record, totalRecord, pageNum, pageSize } =
						res.data || {}
					this.tableData = Array.isArray(record)
						? Object.freeze(record)
						: []
					this.tableData.forEach((item) => {
						item.list.map((feeRate) => {
							feeRate.venueFeeRate =
								feeRate.venueFeeRate * 10000 * 0.01
							if (feeRate.venueCode === 'DZ') {
								feeRate.insureFeeRate =
									feeRate.insureFeeRate * 10000 * 0.01
							}
						})
					})
					this.pageNum = pageNum
					this.ppageSize = pageSize
					this.total = totalRecord || 0
				} else {
					this.$message({
						message: res?.msg || this.$t('common.interface_error'),
						type: 'error'
					})
				}
				this.loading = false
			} catch (e) {
				this.loading = false
			}
		},
		// 编辑新增弹窗
		async editAndAdd(row, index) {
			if (row.merchantId) {
				this.title = this.$t('common.modify')
				this.$refs.editAndAddRef.dialogFormVisible = true
				this.$refs.editAndAddRef.dialogForm = { ...row }
				this.$refs.editAndAddRef.tableData = [].concat(...row.list)
			} else {
				this.title = this.$t('common.add')
				this.loading = true

				await this.getMerchantList()
				const { data } = await queryMerchantVenueListApi({
					pageSize: 200
				})
				data?.record?.map((table) => {
					this.merchartList.map((merchant) => {
						if (table.merchantId === merchant.id) {
							merchant.disabled = true
						}
					})
				})
				this.loading = false
				this.$refs.editAndAddRef.dialogFormVisible = true
				this.$refs.editAndAddRef.dialogForm = {}
			}
		},
		reset() {
			this.queryData = {}
			this.pageParams.pageNum = 1
			this.pageParams.pageSize = 100
			this.loadData()
		},
		feeRateDialog(row) {
			this.feeRateData = row.list
			this.feeRateVisible = true
		}
	}
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__header {
	color: #909399;
	font-weight: 700;
}

::v-deep .tagheight .el-tag {
	height: 24px;
	line-height: 24px;
	min-width: 60px;
}

::v-deep .rempadding .el-dialog__body {
	padding: 0;
	padding-bottom: 30px;

	.contentBox,
	form {
		padding: 0 20px;
	}
}

::v-deep .el-input-number__decrease,
::v-deep .el-input-number__increase {
	display: none;
}

::v-deep .el-input-number--medium .el-input__inner {
	padding: 0 15px;
	text-align: left;
}
.tag-content {
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
}
.decoration {
	text-decoration: underline;
	cursor: pointer;
}

.fenye {
	text-align: center;
}
.flex-right {
	margin: 10px 0;
	display: flex;
	justify-content: flex-start;
	align-items: center;
}
</style>
